<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="__STATIC__/index/images/favicon.png">
    <title>手机端商城-{block name="title"}{/block}</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="__STATIC__/index/css/materialize.css">
    <link rel="stylesheet" href="__STATIC__/index/css/loaders.css">
    <link rel="stylesheet" href="__STATIC__/index/css/line-awesome.css">
    <link rel="stylesheet" href="__STATIC__/index/css/line-awesome-font-awesome.css">
    <link rel="stylesheet" href="__STATIC__/index/css/owl.carousel.min.css">
    <link rel="stylesheet" href="__STATIC__/index/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="__STATIC__/index/css/style.css">

    <script src="__STATIC__/index/js/jquery.min.js"></script>
    <script src="__STATIC__/index/js/materialize.js"></script>
    <script src="__STATIC__/index/js/owl.carousel.min.js"></script>
    <script src="__STATIC__/index/js/main.js"></script>
    <style>
        input::-webkit-input-placeholder {
        /* placeholder颜色  */
            color: inherit;
        }
        textarea::-webkit-input-placeholder {
            color:inherit;
        }
        .am-btn{
            display: inline-block;
            margin-bottom: 0;
            padding: .5em 1em;
            font-size: 1.6rem;
            font-weight: 400;
            line-height: 1.2;
            text-align: center;
            white-space: nowrap;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 0;
            cursor: pointer;
            outline: 0;
            -webkit-appearance: none;
        }
        .am-btn-default{
            color: #444;
            background-color: #e6e6e6;
            border-color: #e6e6e6;
        }
        #screen-box-div {display:none;position: fixed;top:0px;left: 0px;width: 100%;height: 100%;background:rgba(0,0,0,0.3);z-index: 999;text-align: center;}
        #delete-box-div,#queren-box-div {display:none;position: fixed;top:0px;left: 0px;width: 100%;height: 100%;background:rgba(0,0,0,0.3);z-index: 999;text-align: center;}
        #deleteCom-box-div {display:none;position: fixed;top:0px;left: 0px;width: 100%;height: 100%;background:rgba(0,0,0,0.3);z-index: 999;text-align: center;}
        .screen-box-item {margin:auto;background: #FFF;width: 60%;min-height: 23%;margin-top: 200px;
            border-radius: 8px;
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2)!important;
            box-shadow: 0 0 10px rgba(0,0,0,.2)!important;
        }
        .delete-box-item, .queren-box-item{margin:auto;background: #FFF;width: 60%;min-height: 13%;margin-top: 250px;
            border-radius: 8px;
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2)!important;
            box-shadow: 0 0 10px rgba(0,0,0,.2)!important;
        }
        .screen-box-item-title {width: 100%;padding: 10px 0px;overflow: hidden;}
        .delete-box-item-title, .queren-box-item-title {width: 100%;padding: 10px 0px;overflow: hidden;}
        .screen-box-item-title a {float: right;display: block;width: 30px;height: 30px;line-height: 30px;border: 1px solid #CCC;border-radius: 100%;margin-right: 15px;}
        .delete-box-item-title a, .queren-box-item-title a {float: right;display: block;width: 30px;height: 30px;line-height: 30px;border: 1px solid #CCC;border-radius: 100%;margin-right: 15px;}
    </style>
</head>

<body>
<!-- preloader -->
<div class="preloader">
    <div class="spinner"></div>
</div>
<!-- end preloader -->

<!-- navbar -->
<div class="navbar">
    <div class="container">
        <div class="row">
            <div class="col s6">
                <div class="content-left">
                    <a href="#slide-out" data-activates="slide-out" class="sidebar"><i class="fa fa-bars"></i></a>
                    <a href="{:Url('index/index')}"><h3>手机端商城</h3></a>
                </div>
            </div>
            <div class="col s6">
                <div class="content-right">
                    <a href="#slide-out-right" data-activates="slide-out-right" class="sidebar-search"><i class="fa fa-search"></i></a>
                    <a href="#slide-out-cart" data-activates="slide-out-cart" class="sidebar-cart" style="margin-left:10px;">
                        <i class="fa fa-shopping-cart car-number-place"></i>
                        <sup style="margin-left:-10px;" id="car-number">0</sup>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end navbar -->

<!-- sidebar -->
<div class="sidebar-panel">
    <ul id="slide-out" class="collapsible side-nav">

        {if (session('id') == NULL)}
        <li>
            <div class="user-view">
                <div class="background">
                    <img src="__STATIC__/index/images/blog3.jpg" alt="">
                </div>
                <img class="circle responsive-img" src="__STATIC__/index/images/timg.gif" alt="">
                <span class="white-text name">未登录</span>
            </div>
        </li>
        <li><a href="{:Url('index/index')}"><i class="fa fa-home"></i>首页</a></li>
        <li><a href="{:Url('index/product/index')}"><i class="fa fa-female"></i>商品分类</a></li>
        <li><a href="{:url('index/login/index')}"><i class="fa fa-sign-in"></i>登陆</a></li>
        <li><a href="{:url('index/reg/index')}"><i class="fa fa-user-plus"></i>注册</a></li>
        <li><a href="#"><i class="fa fa-envelope-o"></i>联系我们</a></li>

        {else/}

        <li>
            <div class="user-view">
                <div class="background">
                    <img src="__STATIC__/index/images/blog3.jpg" alt="">
                </div>
                <img class="circle responsive-img" src="{$Think.session.head_img}" alt="">
                <span class="white-text name">{$Think.session.nickname}</span>
            </div>
        </li>
        <li><a href="{:Url('index/index')}"><i class="fa fa-home"></i>首页</a></li>
        <li><a href="{:Url('index/product/index')}"><i class="fa fa-female"></i>商品分类</a></li>
        <li><a href="{:Url('index/cart/cart')}"><i class="fa fa-shopping-cart"></i>购物车</a></li>
        <li><a href="{:Url('user/index')}"><i class="fa fa-envelope-o"></i>会员中心</a></li>
        <li><a href="{:Url('coupon/index')}"><i class="fa fa-female"></i>领券中心</a></li>
        <li><a href="#"><i class="fa fa-envelope-o"></i>联系我们</a></li>
        <li><a href="{:url('index/login/logout')}"><i class="fa fa-share"></i>退出</a></li>
        {/if}
    </ul>
</div>
<!-- end sidebar -->

<!-- sidebar -->
<div class="sidebar-panel sidebar-search2">
    <ul id="slide-out-right" class="collapsible side-nav">
        <li>
            <div class="form">
                <form action="{:url('index/product/product_search')}" method="post" id="search-subform">
                    <input type="search" placeholder="请输入关键词" name="keywords">
                    <button class="button" style="margin-top:0px;" onclick="document.getElementById('search-subform').submit();return false"><i class="fa fa-search"></i></button>
                </form>
            </div>
            <div class="clear"></div>
        </li>
        <li><h5>热门搜索</h5></li>
        <li><a href="{:url('index/product/product_search')}?keywords=电脑">电脑</a></li>
        <li><a href="{:url('index/product/product_search')}?keywords=手机">手机</a></li>
        <li><a href="{:url('index/product/product_search')}?keywords=游戏机">游戏机</a></li>
        <li><a href="{:url('index/product/product_search')}?keywords=iphone">iphone</a></li>
        <li><a href="{:url('index/product/product_search')}?keywords=macbook">macbook</a></li>
    </ul>
</div>
<!-- end sidebar -->

<!-- sidebar cart 右侧购物车列表-->
<div class="sidebar-panel sidebar-cart2">
    <div id="slide-out-cart" class="collapsible side-nav">
        {if ($Think.session.id==NULL)}            
        <div class="pages-title">
            <a href="{:url('index/login/index')}"><h2>请先登录</h2></a>
        </div>
        {elseif (isset($carlist))}
        <div id="carBox">
            {volist name="carlist" id="vo"}
            <div class="content car-goods" id="car{$vo.car_id}">
                <div class="cart-img">
                    {volist name="vo['thumb_src']" id="thumb_src"}
                    <img src="{$thumb_src}" alt="">
                    {/volist}
                </div>
                <div class="cart-title">
                    {$vo.name}
                    <p>{$vo.first_guige_name} {$vo.guigeName}</p>
                    <h5>{$vo.price}</h5>
                </div>
                <div class="cart-remove">
                    <i class="fa fa-remove" onclick="showModal(this);" style="cursor:pointer;">
                        <input type="hidden" value="{$vo.car_id}">
                    </i>
                </div>
                <div class="clear"></div>
            </div>
            {/volist}
        </div>
        {/if}
        <div class="cart-button">
            <ul>
                <a href="{:Url('cart/cart')}">
                    <li>
                        <button class="button"><i class="fa fa-shopping-cart"></i>查看购物车</button>
                    </li>
                </a>
            </ul>
        </div>
    </div>
</div>
<!-- end sidebar cart -->
<!-- BEGIN 右侧购物车删除窗口 --> 
<div id="delete-box-div" class="">
    <div class="delete-box-item">
        <div class="delete-box-item-title" style="text-align: left;padding-left: 10px;width:100%;height:30%;">确认要删除该商品吗?</div>
        <div style="margin-top:5%;height:70%;">
            <button style="width:40%;height:35px;background:rgb(156, 156, 149);color:#fff;" onclick="hideModal();">我再想想</button>
            <button style="margin-left:5px;width:40%;height:35px;background:rgb(247, 19, 38);color:#fff;" onclick="deleteSure(this)">确定</button>
        </div>
    </div>
</div>
<!-- END 右侧购物车删除窗口 -->

{block name="content"}{/block}

</body>
<script type="text/javascript">
    var carNumber = $("#slide-out-cart").find('.car-goods').length;
    if(carNumber == 0){
        $("#car-number").remove();
    }
    $("#car-number").html(carNumber);
	//隐藏评论窗口,方式淡出
	function hideModal()
	{
        $('#delete-box-div').fadeOut();
        
	}
	function showModal(obj)
	{
        $('#delete-box-div').fadeIn();
        var carID = $(obj).find('input').val();
	    $('#delete-box-div').attr('class','delBox'+carID);
    }
    function deleteSure(obj){
        var carID = $(obj).parent().parent().parent().attr("class").substring(6);        
        $.ajax({
            url:"{:url('index/cart/delete')}",
            type:"post",
            data:{car_id:carID},
            dataType:"html",
            success:function(data){                
                console.log(data)
                //成功的执行代码
                $("#car"+data).remove();
                $("#car2"+data).remove();
                $('#delete-box-div').fadeOut();
                $("#pBox"+data).remove();                
                var carGoodsNumber = $("#slide-out-cart").find('.car-goods').length;
                $("#car-number").html(carGoodsNumber);
                if(carGoodsNumber == 0){
                    $("#car-number").remove();
                }
                //计算总价
                var totalPrice = 0;
                var length = $(".total-pay").find('.pBox').length;
                for(var i=0;i<length;i++){
                    totalPrice += parseInt($('.tPrice').eq(i).html().substring(1));
                }
                $("#totalPrice").html('￥'+totalPrice);
            }
        });
    }
</script>
{block name="footjs"}{/block}

</html>
